<template>
	<div class="column-item">
		<div class="item" v-for="item in list" :key="item.id">
			<el-checkbox
				:disabled="item.category != 1 && item.hasAuth"
				:value="+(value == item.id)"
				@change="onCheck($event, item)"
				:true-label="1"
				:false-label="0"
			>
				{{ item.name }} ( {{ formatCategroy(item) }} )
			</el-checkbox>
			<v-column-item :value="value" v-if="item.children" name="column-item" :list="item.children" @on-click="onClick"></v-column-item>
		</div>
	</div>
</template>

<script>
import VColumnItem from "./column-item.vue"

export default {
	name: "v-column-item",
	props: {
		list: {},
		value: {},
	},
	data() {
		return {}
	},
	computed: {},
	methods: {
		async onCheck(flag, node) {
			try {
				if (this.value) {
					await this.$confirm("该栏目可能有扩展字段, 切换可能会导致扩展字段数据丢失, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
				}
				this.$emit("on-click", { node: flag ? node : {} })
			} catch (error) {
				//
			}
		},
		onClick({ node }) {
			this.$emit("on-click", { node })
		},
		formatCategroy(item) {
			return ["", "列表栏目", "封面栏目", "外链栏目"][item.category]
		},
	},
	components: {
		VColumnItem,
	},
}
</script>

<style lang="scss" scoped>
.column-item {
	line-height: 20px;
	padding-left: 20px;
}
</style>
